<template>
  <div class="projects my-4">
    <v-container>
    <h1 class="subheading grey--text mx-5 mb-5">Projects</h1>

       <v-expansion-panels v-for="project in myProjects" :key="project.title">
        <v-expansion-panel>
          <v-expansion-panel-header>{{project.title}}</v-expansion-panel-header>
          <v-expansion-panel-content>
              <v-card>
                <v-card-text class="px-4 grey--text">
                  <div class="font-weight-bold">due by {{project.due}}</div>
                  <div>{{project.content}}</div>
                </v-card-text>
              </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>

    </v-container>
  </div>
</template>

<script>
import db from '@/firebase'
export default {
  name: 'Projects',
  data(){
    return {
      projects:[]
    }
  },
  computed:{
    myProjects(){
      return this.projects.filter(project => {
        return project.person === 'Dave Davies'
      })
    }
  },
  created(){
    db.collection('projects').onSnapshot(res => {
      const changes = res.docChanges();

      changes.forEach(change => {
        if(change.type === 'added'){
          this.projects.push({
            ...change.doc.data(),
            id: change.doc.id
            
          })
        }
      })
    })
  }
}
</script>